<template>
  <div class="layout">
    <div class="layout-header">
      <!--<Col span="24">-->
        <!--<img :src="logos" width="131" height="44" class="logo">-->
        <!--<label class="proj-shu">| 运营后台</label>-->
        <span class="top-welcome">欢迎:{{userName}}</span>
        <Button class="top-logout" type="primary" size="large" @click="onLogout" icon="log-out">退出后台</Button>
        <Button class="top-logout top-xgpwd" type="primary" @click="onPwd">修改密码</Button>
        <Modal
              title="修改密码" 
               v-model="onModificationPwd" ok-text="提交" :rules="ruleValidate"  @on-ok="onModificationSubmit()" class="shouka modificationpwd">
               <label class="tabs-label">
                <span class="pwd_color">*</span>旧&nbsp;&nbsp;密&nbsp;&nbsp;码:
              </label>
               <input type="text" class="tabs-input" v-model="oldpwd" prop="oldpwd"></input>
               <input type="hidden" name="" v-model="formValidate.pwd">
               <br/>
               <br/>
               <br/>
              <label class="tabs-label">
                <span class="pwd_color">*</span>新&nbsp;&nbsp;密&nbsp;&nbsp;码:
              </label>
              <input type="password" class="tabs-input" v-model="newpwd" placeholder="请输入新密码" prop="newpwd"></input>
              <p class="pwd_p">只能输入6-18个字母、数字、下划线</p>
               <br/>
              <label class="tabs-label"><span class="pwd_color">*</span>确认密码 :</label>
              <input type="password" class="tabs-input"  v-model="newpwds" placeholder="请输入确认密码" prop='newpwd2'></input>
          </Modal>
        
      <!--</Col>-->
    </div>
    <Row>
        <div class="layout-content">
          <div class="layout-content-main">
            <transition mode="out-in">
              <router-view></router-view>
            </transition>
          </div>
        </div>
        <!--<div class="layout-copy">
            Copyright &copy; 2017-2018,边锋蜀山, All Rights Reserved
        </div>-->
    </Row>
  </div>
</template>
<script>
import {getMyMenu, getMenuVOList} from '@/api/menu.js'
import {setFetchedData, KEYS, getFetchedData} from '@/common/constFetchData.js'
import {getManager, modifyPwd} from '@/api/user.js'
// import logos from '@/assets/bianfeng/logo-s.png'
import {validatPasswad} from '@/common/validate.js'
import {getVO} from '@/common/proto-vo.js'
import {setUserBindUserId, setUserBindUserName, setUserBindUId, setUId, setUserGid, getUserPwd, setToken, setUserPwd} from '@/common/auth'
export default {
  data () {
    return {
      spanLeft: 5,
      spanRight: 19,
      menus: [],
      userName: '',
      helpModal: false,
      // logos,
      onModificationPwd: false,
      newpwd: this.value,
      newpwds: this.value,
      oldpwd: this.value,
      formValidate: {
        pwd: getUserPwd()
      },
      ruleValidate: {
        oldpwd: [{required: true, message: '旧密码不能为空', trigger: 'blur'}],
        newpwd: [{required: true, message: '新密码不能为空', trigger: 'blur'}],
        newpwd2: [{required: true, message: '确认密码不能为空', trigger: 'blur'}]
      }
    }
  },
  created () {
    this.$router.push('PromotersAgent')
    let vos = getFetchedData(KEYS.MY_MENUS)
    if (vos) {
      this.menus = vos
    } else {
      getMyMenu().then((data) => {
        if (!data) {
          return
        }
        let menuAll = getMenuVOList(data)
        // console.log('dash - created', menuAll)
        setFetchedData(KEYS.MY_MENUS, menuAll)
        this.menus = menuAll
        // console.log(this.menus)
      })
    }

    getManager().then((data) => {
      console.log('managerVO:', data)
      if (!data) {
        return
      }
      let ManagerVO = getVO('ManagerVO')
      let pv = data.data.data
      let vo = ManagerVO.decode(pv.data[0])
      if (vo.bindUId > 0) {
        this.userName = vo.userName + ',数字ID:' + vo.bindUId
      } else {
      // this.userName = vo.userName
        this.userName = vo.userName + ',数字ID:未绑定'
      }
      setUserBindUserId(vo.bindUserId)
      setUserBindUserName(vo.bindUserName)
      setUserBindUId(vo.bindUId.toNumber())
      setUId(vo.uid.toNumber())
      setUserGid(vo.gid.toNumber())
    })
    // this.userName = getUserName()
  },
  methods: {
    routeTo (e) {
      console.log(e)
      this.$router.push(e)
    },
    onLogout () {
      window.location.href = '/slotmanager'
    },
    onPwd () {
      this.onModificationPwd = true
    },
    onHelp () {
      this.helpModal = true
    },
    onModificationSubmit () {
      let oldpwdd = this.formValidate.pwd
      let oldpwd = this.oldpwd
      let newPwd = this.newpwd
      let newPwds = this.newpwds
      // let zz = /^[a-zA-Z0-9_]{6,18}$/.test(newPwd)
      if (oldpwdd !== oldpwd) {
        alert('旧密码不正确')
        return false
      }
      if (!validatPasswad(newPwd)) {
        alert('只能输入6-18个字母、数字、下划线!!!')
        return false
      }
      if (newPwd !== newPwds) {
        alert('输入的密码不一致!!!')
        return false
      }
      modifyPwd(oldpwdd, newPwd).then((data) => {
        if (!data) {
          return
        }
        let success = data.data.data.intValues[0]
        let token = data.data.data.strValues[0]
        if (success === 1) {
          setToken(token)
          setUserPwd(newPwd)
          window.location.href = '/slotmanager'
        } else {
          this.$Message.error('修改密码失败!!!')
        }
      })
    }
  }
}
</script>

<style scoped>
  .box2 a{color:#000;text-decoration:underline;}
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .logo{
    float: left;
    margin-top: 20px;
    margin-left: 20px;
  }
  .proj-img{
    margin-left: 20px;
    margin-top: 20px;
  }
  .proj-shu{
     font-size: 50px;
     vertical-align:middle;
     margin-left: 30px;
     line-height: 120px;
     margin-top: 25px;
     height:100px;
  }
  .proj-name{
    font-size: 50px;
    font-weight: bold;
    margin-top: 25px;
    margin-left: 20px;
  }
  .top-logout{
    float:right;
    margin-top: 15px;
    margin-right: 9px;
    font-size: 20px;
    height:50px;
  }
  .top-xgpwd{
    /*margin-right: 10px;*/
  }
  .top-welcome{
    float:left;
    margin-top: 28px;
    font-size: 20px;
    /*margin-right: 600px;*/
    padding: 0px 20px;
  }
  .layout-menu-left {
    background: #464c5b;
    min-height: 600px;
  }
  .layout-header{
    height: 80px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }
  .layout-breadcrumb {
    padding: 10px 15px 0;
  }
  .demo-breadcrumb-separator{
      color: #ff0000;
    }
  .layout-content {
    min-height: 510px;
    margin: 10px;
    overflow: auto;
    background: #fff;
    border-radius: 2px;
  }
  .layout-content-main {
    padding: 10px 10px;
  }
  .layout-copy {
    text-align: center;
    padding: 10px 0 10px;
    color: #9ea7b4;
  }
  .tabs-btn {
    width:122px;
    height:100px;
    font-size: 50px;
    margin-left: 20px;
    /*color: #1881B1;*/
}
.tabs-btn1 {
   width:180px;
   height:100px;
   font-size: 50px;
   margin-left: 20px;
  /*color: #1881B1;*/
}
</style>
